<template>
  <a-layout-footer style="text-align: center">
    开发喵知识库  {{user.name}}
  </a-layout-footer>
</template>

<script>
import {useStore} from "vuex";
import {computed, ref} from "vue";
import {notification} from "ant-design-vue";

export default {
  name: "the-footer",
  setup(){
    const store = useStore();
    const user = computed( () => {
      return store.state.user;
    });
    let ws ;
    const initSocket = () =>{
      ws = new WebSocket("ws://localhost/ws/" + guid());
      //申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头
      ws.onopen = function(){
        //当WebSocket创建成功时，触发onopen事件
        console.log("open", ws.readyState);
      }
      ws.onmessage = function(e){
        //当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
        notification.info({
          message: '点赞通知',
          description: e.data,
        });
      }
      ws.onclose = function(e){
        //当客户端收到服务端发送的关闭连接请求时，触发onclose事件
        console.log("close");
      }
      ws.onerror = function(e){
        //如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
        console.log(e);
      }
    }

    const closeSocket = () => {
      ws.close();
    }

    return {
      user,
      initSocket,
      closeSocket
    }
  },
  mounted() {
    this.initSocket();
  },
  beforeUnmount() {
    this.closeSocket();
  }
}
</script>

<style scoped>

</style>